<template>
  <Layer :layer="layer" @confirm="submit" ref="layerDom">
    <el-form
      :model="form"
      :rules="rules"
      ref="ruleForm"
      label-width="120px"
      style="margin-right: 30px"
    >
      <el-form-item label="名称：" prop="name">
        <el-input
          size="default"
          v-model="form.name"
          placeholder="请输入名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="数字：" prop="number">
        <el-input
          size="default"
          v-model="form.number"
          oninput="value=value.replace(/[^\d]/g,'')"
          placeholder="只能输入正整数"
        ></el-input>
      </el-form-item>
      <el-form-item label="选择器：" prop="select">
        <el-select
          size="default"
          v-model="form.choose"
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="item in selectData"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="单选框：" prop="radio">
        <el-radio-group v-model="form.radio">
          <el-radio
            v-for="item in radioData"
            :key="item.value"
            :label="item.value"
            >{{ item.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
  </Layer>
</template>

<script>
import { defineComponent, ref } from "vue";
import { add, update } from "@/api/table";
import { selectData, radioData } from "./enum";
import Layer from "@/components/layer/index.vue";

export default defineComponent({
  components: {
    Layer
  },

  props: {
    layer: {
      type: Object,
      default: () => ({
        show: false,
        title: "",
        showButton: true
      })
    }
  },
  setup(props, ctx) {
    const ruleForm = ref(null);
    const layerDom = ref(null);
    let form = ref({
      name: ""
    });
    const rules = {
      name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
      number: [{ required: true, message: "请输入数字", trigger: "blur" }],
      choose: [{ required: true, message: "请选择", trigger: "blur" }],
      radio: [{ required: true, message: "请选择", trigger: "blur" }]
    };
    init();

    function init() {
      // 用于判断新增还是编辑功能
      if (props.layer.row) {
        form.value = JSON.parse(JSON.stringify(props.layer.row)); // 数量量少的直接使用这个转
      }
    }

    return {
      form,
      rules,
      layerDom,
      ruleForm,
      selectData,
      radioData
    };
  },
  methods: {
    submit() {
      if (this.ruleForm) {
        this.ruleForm.validate(valid => {
          if (valid) {
            let params = this.form;
            if (this.layer.row) {
              this.updateForm(params);
            } else {
              this.addForm(params);
            }
          } else {
            return false;
          }
        });
      }
    },
    // 新增提交事件
    addForm(params) {
      add(params).then(res => {
        this.$message({
          type: "success",
          message: "新增成功"
        });
        this.$emit("getTableData", true);
        this.layerDom && this.layerDom.close();
      });
    },
    // 编辑提交事件
    updateForm(params) {
      update(params).then(res => {
        this.$message({
          type: "success",
          message: "编辑成功"
        });
        this.$emit("getTableData", false);
        this.layerDom && this.layerDom.close();
      });
    }
  }
});
</script>

<style lang="scss" scoped></style>
